<template>
  <div class="no-wrap q-pa-md">
    <div class="column">
      <div class="text-h6 q-mb-md">设置</div>
      <q-separator/>
      <q-toggle class="justify-center" v-model="darkMode" label="夜间模式"/>
      <q-toggle class="justify-center" v-model="keepLogin" label="保持登录"/>
    </div>
    <q-separator/>
    <q-btn class="cursor-pointer q-mt-xl"
           size="sm" label="退出登录"
           @click="logout"/>
    <!-- <div>注册{{data.a}}天</div> -->
    <!-- <div>设置应用{{data.b}}个，平均节省时间{{data.c}}秒。</div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'UserSettingPanel',
  data () {
    return {
      darkMode: false,
      keepLogin: false,
      data: this.$store.state.userInfo.data
    }
  },
  computed: {},
  methods: {
    async logout () {
      await this.$store.dispatch('logout')
      await this.$router.push({ name: 'Home' })
      location.reload()
    }
  }
})
</script>

<style scoped>

</style>
